<template>
	<div class="rank" ref="rank">
			<!-- 排行榜 -->
			<scroll :dataA="topList"  class="toplist" ref="toplist">
				<ul >
					<li @click="selectItem(item)" class="item" v-for="(item,index) in topList" :key="index">
						<div class="icon"><img width="100" height="100" v-lazy="item.picUrl"/></div>
						<ul class="songlist">
							<li class="song" v-for="(song,index) in item.songList">
								<span>{{index + 1}}</span>
								<span>{{song.songname}}-{{song.singername}}</span>
							</li>
						</ul>
					</li>
				</ul>
				<div class="loading-container" v-show="!topList.length">
					<loading></loading>
				</div>
			</scroll>
			<router-view></router-view>
	</div>
</template>

<script>
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import {playlistMixin} from 'common/js/mixin'
import {ERR_OK} from 'api/config'
import {getTopList} from 'api/rank'
import {mapGetters,mapMutations} from 'vuex'
export default {
  name: 'rank',
	mixins: [playlistMixin],
	data() {
		return {
			topList: [],
		}
	},
	created() {
		 this._getTopList()
	},
	computed: {
		...mapGetters([
			// 'plength'
		])
	},
	methods: {
		handlePlaylist(playlist) {
			const bottom = playlist.length > 0 ? '60px' : ''
			this.$refs.rank.style.bottom = bottom
			this.$refs.toplist.refresh()
		},
		selectItem(item){
			this.$router.push({path:`/rank/${item.id}`}),
			this.setTopList(item)
		},
		_getTopList() {//排行榜数据
			getTopList().then((res) => {
				if (res.code === ERR_OK) {
					this.topList = res.data.topList
				}
			}).catch(()=>{
				console.log("rank_getTopList 出错")
			})
		},
		...mapMutations({
			setTopList: 'SET_TOP_LIST',
		})
	},
	components:{
		Scroll,
		Loading,
		// Confirm
	}
}
</script>
 
<style lang="scss" scoped > 
		 .rank{
			 position: fixed;
			 width: 100%;
			 top: 88px;
			 bottom: 0;
			 .toplist{
				 height: 100%;
				 overflow: hidden;
				 .item{
					 display: flex;
					 margin: 0 20px;
					 padding-top:20px;
					 height: 100px;
					 &.last-child{
						 padding-bottom: 20px;
					 }
					 .icon{
						 flex: 0 0 100px;
						 width: 100px;
						 height: 100px;
					 }
					 .songlist{
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							padding: 0 20px;
							height: 100px;
							overflow: hidden;
							background: $color-highlight-background;
							color: $color-text-d;
							font-size: $font-size-small;
							.song{
								@include no-wrap();
								line-height: 26px;
							}
					 }
				 }
				 .loading-container{@include jucen()}
			 }
		 }
</style>